<template>
  <div class="img-list">
    <myheader outerTitle="图文列表"></myheader>
    <div class="cate">
      <ul id="cateul">
        <li><span>全部</span></li>
        <li v-for="item in cateList" :key="item.id" @click="handleClickCate(item.id)">
          <span>{{item.title}}</span>
        </li>
      </ul>
    </div>
    <div class="img-list-box">
      <ul>
        <li v-for="item in imgsList" :key="item.id">
          <router-link :to="`/imgsDetail/${item.id}`"><img :src="item.img_url" :alt="item.title"></router-link>
          <p>
            <span class="title">{{item.title}}</span>
            {{item.zhaiyao}}
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import myheader from '@/components/myheader'
import { getImgsList, getTopCate } from '@/api'
export default {
  components: {
    myheader
  },
  data () {
    return {
      imgsList: [],
      cateList: [] // 图文顶部的分类
    }
  },
  created () {
    this.initImgsList()
    // 页面一加载就获取全部的分类情况
    this.getImages(0)
  },
  methods: {
    // 图文分类初始化
    initImgsList () {
      getTopCate()
        .then(res => {
          // console.log(res)
          this.cateList = res.message
          // 设置ul的宽度，让分类名显示在一行上
          // 获取分类名的个数，因为自定义了一个全部的类名，所以要加1
          let totalNum = res.message.length + 1
          // 设置每个分类名称的宽为60
          let nameVal = 60
          document.getElementById('cateul').style.width = totalNum * nameVal + 'px'
        })
    },
    // 封装获取图片列表
    getImages (id) {
      getImgsList(id)
        .then(res => {
          this.imgsList = res.message
          // console.log(this.imgsList)
        })
    },
    // 处理点击分类
    handleClickCate (id) {
      this.getImages(id)
    }
  }
}
</script>

<style lang="scss" scoped>
    .img-list {
    margin-bottom: 55px;
    margin-top: 40px;
  }
  .cate {
    max-width: 100%;
    margin: 0;
    overflow-x:auto;
    overflow-y: hidden;
    font-size: 14px;
    ul {
      padding-left: 10px;
      margin: 5px 0;
      li {
        list-style: none;
        display: inline-block;
        padding: 0 0 0 5px;
        span {
          color:#0094ff;
        }
      }
    }
  }
  .img-list-box {
    ul {
      padding: 0;
      li {
        list-style: none;
        position: relative;
      }
    }
    p {
      font-size: 14px;
      color: #fff;
      position: absolute;
      bottom: 0px;
      left: 0px;
      background-color: rgba(0,0,0,0.4);
      .title {
        font-weight: bold;
      }
    }
    img {
      width: 100%;
    }
  }

  image[lazy=loading] {
    width: 100%;
    margin: auto;
  }
</style>
